<template>
  <basic-dialog
    width="40%"
    title="暂不开发"
    :visible="visible"
    :handleClose="handleClose"
  >
    <LabelSelect
      size="mini"
      label="暂不开发原因"
      label-width="130px"
      :value.sync="notDevelop.value"
      :options="notDevelop.options"
    />
    <div class="reject-wrap">
      <div>暂不开发详情：</div>
      <el-input
        type="textarea"
        resize="none"
        v-model.trim="notDevelop.details"
        placeholder="请输入驳回详情"
        :autosize="false"
        :maxlength="inputMaxlength"
        :show-word-limit="!!inputMaxlength"
      />
    </div>
    <div slot="ft" class="footer-wrap">
      <el-button
        type="primary"
        :loading="okLoading"
        @click="handleOk">确定
      </el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import LabelSelect from '@/pages/commodity/components/LabelSelect';
import { NOT_DEV_OPTIONS } from '../constants';
export default {
  components: {
    BasicDialog,
    LabelSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    inputMaxlength: {
      type: Number
    },
    confirmMethod: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      notDevelop: {
        value: '',
        options: NOT_DEV_OPTIONS,
        details: ''
      },
      okLoading: false
    }
  },
  methods: {
    // 检验必填项
    validateRequireItems () {
      if (!this.notDevelop.value) return this.$message.warning('暂不开发原因不能为空')
      if (!this.notDevelop.details) return this.$message.warning('暂不开发详情不能为空')
    },
    // 确定
    handleOk () {
      if (this.validateRequireItems()) return
      const loadingFn = state => { this.okLoading = state }
      const data = {
        notDevType: this.notDevelop.value,
        notDevRemark: this.notDevelop.details
      }
      this.confirmMethod(data, loadingFn)
    },
    // 取消
    handleClose () {
      this.$emit('update:visible', false)
    },
  }
}
</script>
<style lang="less" scoped>
.reject-wrap {
  display: flex;
  margin-top: 10px;
  div:first-child {
    text-align: right;
    min-width: 130px;
  }
}
.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
